<template>
	<view class="globe_back">
		<view @click="goBack" class="back">
			<image class="goback" src="/stattic/imgs/icon_fh.png" mode="widthFix"></image>
		</view>
		<u-swiper :list="infos.gallery_images" @change="(e) => (currentNum = e.current)" :autoplay="false"
			indicatorStyle="right: 20px" height="350">
			<view slot="indicator" class="indicator-num">
				<text class="indicator-num__text">{{ currentNum + 1 }}/{{infos.gallery_images_count }}</text>
			</view>
		</u-swiper>
		<view class="box">
			<view class="info">
				<view class="flex justify_content_between">
					<view class="price">
					
						￥<text class="priceN">{{ infos.specification[0].ch[0].money}}</text>
						<text class="oldprice">￥{{ infos.counter_price|| 0 }}</text>
					</view>
					<view class="salesVolume">月销1w+</view>
				</view>
				<view class="title">{{ infos.name }}</view>
			</view>
			<!-- 规格 -->
			<view class="specifications">
				<view class="flex justify_content_between" @click="t()">
					<view class="specs">规格</view>
					<view class="flex selected">
						<text class="specs specsTitle">已选：{{specifications}}</text>
						<image class="icon_r" src="https://jiuyuan.smomotbo.com/static/imgs/query-info/next-icon.png"
							mode="widthFix"></image>
					</view>
				</view>
			</view>
			<!-- 发货 保障 -->
		<!-- 	<view class="send">
				<view class="flex justify_content_between" v-for="(attribute, index) in info.meta.attributes"
					:key="index">
					<view>{{ attribute.name }}</view>
					<view>{{ attribute.value }}</view>
				</view>
			</view> -->
			<!-- 评价 -->
			<view class="evaluateList">
				<view class="flex justify_content_between" @click="allevalua(infos.id)">
					<view class="allevalua">全部评价({{ infos.evaluate_count }})</view>
					<view class="all" >
						查看全部
						<image class="icon_r" src="/static/imgs/next-icon.png" mode="widthFix"></image>
					</view>
				</view>
				<template v-if="infos.evaluate">
					<view v-for="evaluate in infos.evaluate">
						<view class="flex evaList">
							<view>
								<image class="userImg" :src="evaluate.user_image" mode="widthFix">
								</image>
							</view>
							<view>
								<text class="title">{{ evaluate.user_name }}</text>
								<text class="time">{{ evaluate.createtime }}</text>
								<u-rate :count="count" v-model="evaluate.start" active-color="#FF6401"
									inactiveColor="#F7F7F7" size="16"></u-rate>
							</view>
						</view>
						<view class="evatext">{{ evaluate.content }}</view>
						<view>
							<image v-for="evaluate_img in evaluate.images" class="evaluateImg"
								:src="evaluate_img" mode="widthFix"></image>
						</view>
					</view>
				</template>
			</view>
		</view>
		<!-- 详情图 -->
		<view class="u-content">
			<image v-for="(ite,ind) in infos.details_content" class="evaluateImg"
				:src="ite"   style="width: 100%;"></image>
		</view>
		<!-- 规格、加入购物车弹窗 -->
		<view class="popup">
			<u-popup :show="show" @close="c()" closeOnClickOverlay="true" :round="10" customStyle="padding:32rpx">
				<view class="flex">
					<image class="productMap" :src="infos.specification[0].ch[0].pic_image" mode="widthFix">
					</image>
					<view class="popPrice">
						￥
						<text style="font-size: 40rpx">{{money}}</text>
					</view>
				</view>
				<view v-for="(specItem, siIdx) in infos.specification">
					<view>
						<view class="minTitle">{{ specItem.name }}</view>
						<view>
							<!-- <u-tag v-for="specValue in item.value" :key="specValue.key" :text="specValue.key" plain size="mini" ></u-tag> -->
							<text v-for="(specValue, svIdx) in specItem.ch" :key="specValue.key" class="poptip"
								:class="{ popactive: specValue.is_show }" @click="handleCheckSku(siIdx, svIdx)">
								{{ specValue.specification }}
							</text>
						</view>
					</view>
				</view>
				<view class="flex justify_content_between">
					<view class="minTitle">数量</view>
					<u-number-box v-model="buyNum" :min="1"
						:max="99" integer="true"
						buttonSize="26"></u-number-box>
				</view>

				<view style="height: 150rpx"></view>
				<view class="flex flex_wrap justify_content_between tabbar">
					<view class="tabLeft flex" style="width: 40%">
						<view class="flex_1" @click="collect">
							<image v-if="sc == 0" class="tabicon" :src="url+'/imgs/sc.png'" mode="widthFix">
							</image>
							<image v-if="sc == 1" class="tabicon" src="/static/imgs/star.png" mode="widthFix"></image>
							<text class="tabtext">收藏</text>
						</view>
						<view class="flex_1">
							<image class="tabicon" :src="url+'/imgs/kf.png'" mode=""></image>
							<text class="tabtext">客服</text>
						</view>
						<view class="flex_1" @click="store">
							<image class="tabicon" :src="url+'/imgs/sj.png'" mode=""></image>
							<text class="tabtext">进店</text>
						</view>
					</view>
					<view class="flex" style="width: 60%;margin-top: 35rpx;" v-if="infos.product_type==1">
						<view class="join" @click="add_to_shopping_cart" >加入购物车</view>
						<view class="buy" @click="buy">立即购买</view>
					</view>
					<view class="flex" style="width: 60%;margin-top: 35rpx;" v-if="infos.product_type==3">
						
						<view class="buys" @click="buy">立即购买</view>
					</view>
				</view>
			</u-popup>
		</view>
		<!-- 底部 -->
		<view style="height: 200rpx"></view>
		<view class="flex flex_wrap justify_content_between tabbar">
			<view class="tabLeft flex" style="width: 40%">
				<view class="flex_1" @click="collect">
					<image v-if="sc == 0" class="tabicon" :src="url+'/imgs/sc.png'" mode="widthFix"></image>
					<image v-if="sc == 1" class="tabicon" src="/static/imgs/star.png" mode="widthFix"></image>
					<text class="tabtext">收藏</text>
				</view>
				<view class="flex_1">
					<image class="tabicon" :src="url+'/imgs/kf.png'" mode=""></image>
					<text class="tabtext">客服</text>
				</view>
				<view class="flex_1" @click="store">
					<image class="tabicon" :src="url+'/imgs/sj.png'" mode=""></image>
					<text class="tabtext">进店</text>
				</view>
			</view>
			<view class="flex" style="width: 60%;" @click="t()" v-if="infos.product_type==1">
				<view class="join" >加入购物车</view>
				<view class="buy">立即购买</view>
			</view>
			<view class="flex" style="width: 60%;" @click="t()" v-if="infos.product_type==3">
				<!-- <view class="join" >加入购物车</view> -->
				<view class="buys">立即购买</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		unifyOrder,
		goodsInfo,
		goodsCartAdd,
		goodsCollectAdd,
		goodsCollectDel
	} from '@/api';

	export default {
		data() {
			return {
				url: '',
				sc: 0,
				show: false,
				count: 5,
				list: [],
				currentNum: '',
				info: {},
				is_init: true,
				specMeta: [],
				skuMeta: [],
				selectedSku: {},
				defaultSkuImage: '',
				infos:'',
				money:0,
				specifications:'',
				buyNum:1,
				lat:'',
				lng:'',
				url:'',
			};
		},
		onShow() {
			// this.url = this.baseUrl + this.imgPath;
		},
		onLoad(args) {
			var that= this
			uni.getLocation({
				type: 'wgs84',
				// altitude:true,
				success: function (res) {
					that.lat=res.latitude;
					that.lng=res.longitude;
					console.log('当前位置的经度：' + res.longitude);
					console.log('当前位置的纬度：' + res.latitude);
				}
			});
			
			// setTimeout(() => {
				this.getGoodsInfo(args.id);
				this.getList(args.id);
			// }, 1000);
			console.log('args', args);
		    this.url=this.$.ajax_url2
			
		},
		methods: {
			t(){
				this.show = true
			},
			c(){
				this.show = false
			},
			handleCheckSku(i,v){
				
				console.log(i,v,this.infos.specification[i].ch[v].is_show);
				if(this.infos.specification[i].ch[v].is_show){
					
					this.infos.specification[i].ch[v].is_show=false;
				}else{
					// this.infos.specification[i].ch[v].is_show=true;
					this.infos.specification[i].ch.forEach(function (items, indexs) {
						if(indexs==v){
							items.is_show=true;
						}else{
							items.is_show=false;
						}
					});
					
				}
				
					
				   
			
				
				//更新选中规格
				let specificationss='';
				let moneys=0;
				this.infos.specification.forEach(function (item, index) {
					let m=0;
				    item.ch.forEach(function (items, indexs) {   
						console.log(items)
						// if(!items.is_show){
						// 	specificationss=specificationss+','+items.specification;
						// }else{
						// 	specificationss=items.specification;
						// }
						
						if(items.is_show){
							if(specificationss){
								specificationss=specificationss+','+items.specification;
							}else{
								specificationss=items.specification;
							}
							if(moneys){
								moneys=Number(moneys)+Number(items.money);
							}else{
								moneys=Number(items.money);
							}
							
						}
				    });
				});
				this.specifications=specificationss
				this.money=moneys
				// console.log(specificationss)
			},
			removeGoodsCollect() {
				goodsCollectDel(this.info.collect_id).then((res) => {
					console.log(res);
					this.getGoodsInfo(this.info.id);
				});
			},
			//添加购物车
			add_to_shopping_cart() {
				
				var that= this
				for (var i=0 ; i<this.infos.specification.length ; i++) {
					 let type=1
					 for (var j=0 ; j<this.infos.specification[i].ch.length ; j++) {
					 	   if(this.infos.specification[i].ch[j].is_show){
					 	      	type=2;
					 	   }
					 }
					 if(type==1){
					   that.$.ti_shi('请选择'+this.infos.specification[i].name);
					   return;
					 }
				}

				// console.log(this.buyNum);return
				let data={
					merchant_id:this.infos.join_merchant_id,
					store_goods_id:this.infos.id,
					price:this.money,
					number:this.buyNum,
					pic_url:this.infos.goods_image,
					store_goods_id:this.infos.id,
					specifications:this.specifications	,
					name:this.infos.name,
				}
				console.log(data);return
				this.$.ajax(1,"POST","index/add_to_shopping_cart",data,(res)=>{
				  if(res.code==200){
					  this.$.ti_shi('已添加');
					  setTimeout(() => {
					  	 this.show=false
					  }, 1000);
						// this.sc=res.data;
				  }else{
				     this.$.ti_shi(res.msg);
				  }
				})
			},
			// 收藏
			collect() {
				this.$.ajax(1,"POST","index/collect",{
					id:this.infos.id
				},(res)=>{
				  if(res.code==200){
						this.sc=res.data;
					
				  }else{
				     this.$.ti_shi(res.msg);
				  }
				})
				// if (this.sc == 0) {
				// 	this.sc = 1;
				// } else {
				// 	this.sc = 0;
				// }
			},
			getGoodsInfo(id) {
				
				this.$.ajax(1,"POST","index/store_goods_de",{
					id:id
				},(res)=>{
				  if(res.code==200){
					 
					 	this.infos = res.data;
						this.sc=res.data.sc;
						let specificationss='';
						let moneys=0;
						this.infos.specification.forEach(function (item, index) {
						    item.ch.forEach(function (items, indexs) {   
								
								if(indexs==0){
									items.is_show=true
									if(specificationss){
										specificationss=specificationss+','+items.specification;
									}else{
										specificationss=items.specification;
									}
									if(moneys){
										moneys=Number(moneys)+Number(items.money);
									}else{
										moneys=Number(items.money);
									}
								}
								console.log(items.money,145614256125631256126532)
						    });
						});
						this.specifications=specificationss
						this.money=moneys
						console.log(this.infos)
				  }else{
				     this.$.ti_shi(res.msg);
				  }
				})
				// goodsInfo(id).then((res) => {
				// 	this.info = res.data;
				// });
			},
			valChange(e) {
				this.buyNum = e.value;
				console.log(this.selectedSku.sum, this.buyNum, e);
			},
			allevalua(id) {
				uni.navigateTo({
					url: '/pages/index/AllEvaluations?id='+id
				});
			},
			getList() {
				this.list = [];
			},
			buy() {
				
				var that= this
				for (var i=0 ; i<this.infos.specification.length ; i++) {
					 let type=1
					 for (var j=0 ; j<this.infos.specification[i].ch.length ; j++) {
					 	   if(this.infos.specification[i].ch[j].is_show){
					 	      	type=2;
					 	   }
					 }
					 if(type==1){
					   that.$.ti_shi('请选择'+this.infos.specification[i].name);
					   return;
					 }
				}
				// this.$.ti_shi('下单成功');
				// setTimeout(() => {
				// 	uni.switchTab({
				// 		url:'/pages/home/home'
				// 	})
				// }, 1000);
				// return;
				
					this.$.ajax(1,"POST","index/add_order",{
						product_name:this.infos.name,
						product_image:this.infos.goods_image,
						specifications:this.infos.specification,
						num:this.buyNum,
						product_id:this.infos.id,
						is_shoppingcart:0,
						lat:this.lat,
						lng:this.lng,
						// money:this.infos.goods_image
					},(res)=>{
					  if(res.code==200){
						    console.log(res)
							uni.navigateTo({
								url:'/pages/index/PaymentOrder?order_id='+res.order_id+'&product_type='+this.infos.product_type
							})
						 	// this.infos = res.data;
							 // console.log(this.infos)
					  }else{
					     this.$.ti_shi(res.msg);
					  }
					})
				
				
				
				// const {
				// 	id,
				// 	meta: GoodsMeta,
				// 	sku_meta,
				// 	spec_meta,
				// 	cart_id,
				// 	category_id,
				// 	collect_id
				// } = this.info;
				// const meta = {
				// 	goods: {
				// 		[id]: {
				// 			sku: this.selectedSku,
				// 			id,
				// 			cart_id,
				// 			category_id,
				// 			collect_id
				// 		}
				// 	}
				// };
				// unifyOrder(1, {
				// 	meta
				// }).then((res) => {
				// 	console.log('res');
				// 	const order_id = res.data.id;
				// 	order_id && this.$u.route('/pages/index/PaymentOrder', {
				// 		order_id
				// 	});
				// });
				// console.log('meta', meta);
				// uni.navigateTo({
				//     url: '/pages/index/PaymentOrder'
				// });
			},
			close() {
				this.show = false;
			},
			store(){
				uni.navigateTo({
					url: '/pages/index/MerchantDetails?store_id='+this.infos.join_merchant_id
				});
			},
			goBack() {
				uni.navigateBack();
			}
		}
	};
</script>

<style scoped lang="scss">
	.back {
		position: fixed;
		top: 112rpx;
		left: 32rpx;
		z-index: 99;

		.goback {
			width: 40rpx;
			height: 40rpx;
		}
	}

	.box {
		padding: 32rpx;

		.info {
			background: #ffffff;
			border-radius: 16rpx;
			padding: 24rpx;

			.price {
				color: #ff6401;
				font-size: 24rpx;

				.priceN {
					font-size: 40rpx;
					font-weight: 700;
				}

				.oldprice {
					color: #ccced1;
					text-decoration: line-through;
				}
			}

			.salesVolume {
				color: #999ca3;
				font-size: 24rpx;
				padding-top: 10rpx;
			}

			.title {
				color: #00091a;
				font-weight: 32rpx;
				font-weight: bold;
				margin-top: 16rpx;
				overflow: hidden; //多出的隐藏
				text-overflow: ellipsis; //多出部分用...代替
				display: -webkit-box; //定义为盒子模型显示
				-webkit-line-clamp: 2; //用来限制在一个块元素显示的文本的行数
				-webkit-box-orient: vertical; //从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
			}
		}

		.specifications {
			background: #ffffff;
			border-radius: 16rpx;
			padding: 24rpx;
			margin-top: 24rpx;

			.specs {
				color: #333a47;
				font-size: 28rpx;
			}

			.specsTitle {
				display: inline-block;
				white-space: nowrap;
				width: 100%;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.selected {
				width: 70%;
				color: #666b75;
				font-size: 28rpx;
			}

			.icon_r {
				width: 32rpx;
				height: 32rpx;
				vertical-align: middle;
			}
		}

		.send {
			background: #ffffff;
			border-radius: 16rpx;
			padding: 24rpx;
			margin-top: 24rpx;
			color: #333a47;
			font-size: 28rpx;
			line-height: 60rpx;
		}

		.evaluateList {
			background: white;
			border-radius: 16rpx;
			padding: 24rpx;
			margin: 24rpx 0;

			.evaList {
				margin-top: 24rpx;
			}
		}

		.userImg {
			width: 64rpx;
			height: 64rpx;
			border-radius: 50%;
		}

		.title {
			margin: 0 8rpx;
			color: #00091a;
			font-size: 28rpx;
		}

		.time {
			color: #ccced1;
			font-size: 24rpx;
		}

		.evatext {
			font-size: 28rpx;
			color: #00091a;
			margin: 16rpx 0;
		}

		.evaluateImg {
			width: 196rpx;
			height: 196rpx;
			border-radius: 16rpx;
			margin: 9rpx;
		}

		.allevalua {
			color: #00091a;
			font-size: 32rpx;
			font-weight: bold;
		}

		.icon_r {
			width: 32rpx;
			height: 32rpx;
			vertical-align: middle;
		}

		.all {
			color: #999ca3;
			font-size: 28rpx;
		}
	}

	.tabbar {
		height: 108rpx;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background: white;
		padding: 32rpx;

		.tabicon {
			width: 48rpx;
			height: 48rpx;
			display: block;
		}

		.tabtext {
			color: #999ca3;
			font-size: 24rpx;
		}

		.join {
			width: 200rpx;
			height: 76rpx;
			line-height: 76rpx;
			color: white;
			font-size: 28rpx;
			background-image: linear-gradient(to right, #ffd0b2, #ffa266);
			border-radius: 50px 0 0 50px;
			text-align: center;
		}

		.buy {
			width: 200rpx;
			height: 76rpx;
			line-height: 76rpx;
			color: white;
			font-size: 28rpx;
			background-image: linear-gradient(to right, #ff924d, #ff6401);
			border-radius: 0 50px 50px 0;
			text-align: center;
		}
		.buys {
			width: 400rpx;
			height: 76rpx;
			line-height: 76rpx;
			color: white;
			font-size: 28rpx;
			background-image: linear-gradient(to right, #ff924d, #ff6401);
			border-radius: 50px 50px 50px 50px;
			text-align: center;
		}
	}

	.indicator {
		justify-content: center;

		&__dot {
			height: 6px;
			width: 6px;
			background-color: rgba(255, 255, 255, 0.35);
			margin: 0 5px;
			transition: background-color 0.3s;

			&--active {
				background-color: #ffffff;
			}
		}
	}

	.indicator-num {
		padding: 2px 0;
		background-color: rgba(0, 0, 0, 0.35);
		width: 35px;
		@include flex;
		justify-content: center;

		&__text {
			color: #ffffff;
			font-size: 12px;
		}
	}

	.popup {
		.productMap {
			width: 96rpx;
			height: 96rpx;
			border-radius: 8rpx;
		}

		.popPrice {
			color: #ff6401;
			font-size: 24rpx;
			margin-top: 40rpx;
			margin-left: 16rpx;
		}

		.minTitle {
			font-size: 28rpx;
			color: #999ca3;
			margin: 40rpx 0;
		}

		.poptip {
			height: 60rpx;
			line-height: 60rpx;
			padding: 0 24rpx;
			color: #666b75;
			font-size: 28rpx;
			margin: 16rpx;
			display: inline-block;
			background: #f7f7f7;
			border-radius: 8rpx;
		}
	}

	.popactive {
		color: white !important;
		background: #3377ff !important;
	}
</style>